<template>
	<div class="px-[30px] text-center pb-16" :class="{ 'no-padding': isUSDTUser }">
		<div class="text-2xl text-primary">{{ $t('validate.unlockRecharge') }}</div>
		<p class="text-sm text-t-1 mt-2 mb-3">{{ subtitle }}</p>
		<div
			class="flex items-center justify-center w-[214px] h-[80px] mx-auto mb-[30px] text-primary overflow-hidden"
			style="
				background: url('@/assets/img/wallet/validate/validate_bg@2x.png') no-repeat center center /
					100% 100%;
			"
			:class="{ '!mb-[6px]': isUSDTUser }">
			<base-icon name="recharge1" class="text-[75px]" size="90px" />
		</div>
		<template v-if="isUSDTUser">
			<binding-email :isValidate="true" white-space-height="0" :show-title="false" />
		</template>
		<template v-else>
			<base-button
				round
				block
				type="primary"
				:gradient="false"
				@click="handleClick('mobile')"
				class="mb-3">
				{{ $t('validate.bindPhoneOrEmail') }}
			</base-button>
			<base-button
				v-if="!String($attrs.bankCards).length as any"
				type="primary"
				:gradient="false"
				@click="handleClick('bank')">
				{{ $t('validate.provideBank') }}
			</base-button>
		</template>
	</div>
</template>

<script lang="ts" setup>
import { computed } from 'vue'
import { t } from '@/utils'
import { useAppStore } from '@/store'
import BindingEmail from '@/components/profile/binding/binding-email.vue'
import { BaseButton, BaseIcon } from '@/components/base'

const emit = defineEmits(['select'])
const appStore = useAppStore()
const isUSDTUser = computed(() => appStore.isUsdt)
const subtitle = computed(() => {
	return isUSDTUser.value ? t('validate.subtitleUSDT') : t('validate.subtitleRecharge')
})
const handleClick = (type: any) => {
	emit('select', type)
}
</script>
<style scoped lang="scss"></style>
